<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			margin-right: 10px;
			float: left;
			margin-bottom: 10px;
		}
		/*#box2{
			width: 200px;
			height: 200px;
			background: blue url() 0 0 no-repeat;
		}*/
		span{
			color: #fff;
			font-size: 20px;
		}
	</style>
	<script>
		window.onload= function () {
			
			// box1 = document.getElementById('box1');
			// box2 = document.getElementById('box2');
			// text = document.getElementById('text');

			// box1.onclick= function () {
			// 	box1.appendChild(text);
			// }
			// box2.onclick= function () {
			// 	box2.appendChild(text);
			// }
			// 
			box = document.getElementsByClassName('box');

			text = document.getElementById('text');

			for (var i = 0; i < box.length; i++) {
				box[i].onclick = function () {
					this.appendChild(text);
				}
			}
		}
	</script>
</head>
<body>
	<div class="box">
		<span id="text">学并思</span>
	</div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</body>
</html>